<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1> {{ message }}</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        var vm = new Vue({
            // el:'#app',
            data:{
                message: '梦学谷'
            },
            
            beforeCreate() {
                // Vue 实例创建前被调用，数据和模板均未获取到
                console.log('beforeCreate()', this.$el, this.$data)
            },

            created () {
                // Vue实例创建后，最早可以获取到 data数据的钩子，但是模板未获取到
                // 建议在这里面发送 ajax 异步请求
                console.log('created()', this.$el, this.$data)
            },

            beforeMount() {
                // 数据挂载之前，获取到了模板，但是数据还未挂载到模板上
                console.log('beforeMount()', this.$el, this.$data)
            },

            mounted() {
                // 数据已经挂载到模板中了
                console.log('mounted()', this.$el, this.$data)
            },

            beforeUpdate() {
                // 当data 数据更新之后，去更新模板中的数据前调用
                console.log('beforeUpdate()', this.$el.innerHTML, this.$data)
            },

            updated() {
                console.log('updated()', this.$el.innerHTML, this.$data)
            },

            beforeDestroy() {
                //销毁 Vue 实例之前调用
                // 收尾工作
                console.log('beforeDestroy()')
            },

            destroyed() {
                //销毁 Vue 实例之后调用
                console.log('destroyed()')
            },
        }).$mount('#app') // 如果实例中没有 el 选项，可使用 $mount()手动挂载 Dom

        // vm.$destroy() // 销毁Vue实例
    </script>
</body>
</html>